C S S - Cascading Style Sheets
6. text gestalten
6.3 rahmen und tabellen
Wenn man bei einer tabelle und/oder bei tabellenelementen die rahmen mit hilfe von CSS zeichnen will, wird es etwas aufwendig, denn man muss im table-tag den rahmen um die tabelle und für jedes tabellenelement im td-tag die einzelheiten des rahmens für das tabellenelement definieren. Außerdemm kann man im table-tag noch einige grundsätzliche dinge über die rahmengestaltung vereinbaren.
| border-collapse: collapse; | die rahmen der tabellenelemente werden ohne abstand zum rahmen der tabelle und zum rahmen der benachbarten tabellenelemente gezeichnet |
| border-collapse: separate; | die rahmen der tabellenelemente werden mit einem abstand gezeichnet, den muss man aber mit der folgenden eigenschaft bestimmen: |
| border-spacing: x-me y-me | x-me ist eine masseinheit für den horizontalen abstand und y-me für den vertikalen abstand. |
einfaches beispiel
Gezeigt werden vier tabellen mit unterschiedlichen rahmen; die erste mit
kleinem abstand der rahmen, also ohne border-collapse, die zweite mit
deutlichem abstand der rahmen und die dritte ganz ohne abstand, dafür aber
hat der tabelleninhalt durch padding abstand vom rahmen. Die vierte
tabelle ist seltsam, hier wird der rahmen in den tr-tags definiert,
was dazu führt, dass nur zwischen den zeilen ein rahmen gezeigt wird. Das
funktioniert aber nur mit border-collapse: collapse.
| aaaa | bbbb |
| cccc | dddd |
| aaaa | bbbb |
| cccc | dddd |
| aaaa | bbbb |
| cccc | dddd |
| aaaa | bbbb |
| cccc | dddd |
Die vorstehenden beispiele zeigen, dass die gestaltung einer tabelle recht schreibaufwendig sein kann. Wenn man einen bestimmten tabellentyp auf einer seite oder in einer anwendung mehrfach benötigt, wird man die definition der tabelle wohl besser in den header der seite oder eine eingebundene datei verlegen (1.3.2 – embedded styles, 1.3.3 – externe styles). In beiden fällen benötigt man dann nachfolge-selektoren (2.5).
beispiele mit klassen
Für die definition von tabellen sind zwei klassen vereinbart, die sich nur
darin unterscheiden, dass es einmal zwischen den gerahmten elementen keinen
abstand und einmal den standard-abstand gibt. Beide klassen enthalten eine
unterklasse mit der elemente ohne rahmen dargestellt werden.
| titel 1 | titel2 |
|---|---|
| klasse | tbstd |
| blablabla | ein beliebiger text |
| endezeile | |
| titel 1 | titel2 |
|---|---|
| klasse | tbmit |
| blablabla | ein beliebiger text |
| endezeile | |
Das nächste beispiel treibt es etwas bunt; das besondere dabei ist, dass in der vereinbarung der klasse bunt die angabe border-collapse fehlt. Beim der zweiten tabelle wird das einfach nachgeliefert.
| titel 1 | titel2 |
|---|---|
| aaaaa | bbbbb |
| blablabla | text |
| titel 1 | titel2 |
|---|---|
| aaaaa | bbbbb |
| blablabla | text |